<!DOCTYPE html>
<html>
<head>
    <title>灯控管理图标生成器</title>
</head>
<body>
    <canvas id="iconCanvas" width="512" height="512"></canvas>
    <script>
        const canvas = document.getElementById('iconCanvas');
        const ctx = canvas.getContext('2d');
        
        // 创建渐变背景
        const bgGradient = ctx.createLinearGradient(0, 0, 512, 512);
        bgGradient.addColorStop(0, '#667eea');
        bgGradient.addColorStop(1, '#764ba2');
        
        // 绘制背景
        ctx.fillStyle = bgGradient;
        ctx.roundRect = function(x, y, w, h, r) {
            this.beginPath();
            this.moveTo(x + r, y);
            this.lineTo(x + w - r, y);
            this.quadraticCurveTo(x + w, y, x + w, y + r);
            this.lineTo(x + w, y + h - r);
            this.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
            this.lineTo(x + r, y + h);
            this.quadraticCurveTo(x, y + h, x, y + h - r);
            this.lineTo(x, y + r);
            this.quadraticCurveTo(x, y, x + r, y);
            this.closePath();
        };
        ctx.roundRect(0, 0, 512, 512, 120);
        ctx.fill();
        
        // 绘制灯泡主体
        const centerX = 256;
        const centerY = 220;
        
        // 灯泡渐变
        const lightGradient = ctx.createLinearGradient(centerX-80, centerY-100, centerX+80, centerY+100);
        lightGradient.addColorStop(0, '#ffd700');
        lightGradient.addColorStop(1, '#ffb347');
        
        ctx.fillStyle = lightGradient;
        ctx.beginPath();
        ctx.ellipse(centerX, centerY, 80, 100, 0, 0, 2 * Math.PI);
        ctx.fill();
        
        // 灯泡边框
        ctx.strokeStyle = '#ffffff';
        ctx.lineWidth = 6;
        ctx.stroke();
        
        // 灯泡底座
        ctx.fillStyle = '#e0e0e0';
        ctx.fillRect(centerX-60, centerY+80, 120, 40);
        ctx.strokeStyle = '#ffffff';
        ctx.lineWidth = 4;
        ctx.strokeRect(centerX-60, centerY+80, 120, 40);
        
        // 底座螺纹
        ctx.fillStyle = '#cccccc';
        ctx.fillRect(centerX-50, centerY+90, 100, 8);
        ctx.fillRect(centerX-50, centerY+102, 100, 8);
        
        // 发光效果
        const glowGradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 110);
        glowGradient.addColorStop(0, 'rgba(255,255,255,0.8)');
        glowGradient.addColorStop(1, 'rgba(255,215,0,0.2)');
        
        ctx.fillStyle = glowGradient;
        ctx.beginPath();
        ctx.ellipse(centerX, centerY, 90, 110, 0, 0, 2 * Math.PI);
        ctx.fill();
        
        // 控制面板
        const panelX = centerX + 100;
        const panelY = centerY + 100;
        
        ctx.fillStyle = '#ffffff';
        ctx.beginPath();
        ctx.arc(panelX, panelY, 30, 0, 2 * Math.PI);
        ctx.fill();
        ctx.strokeStyle = '#667eea';
        ctx.lineWidth = 3;
        ctx.stroke();
        
        // 控制按钮
        const buttonSize = 6;
        ctx.fillStyle = '#34c759';
        ctx.beginPath();
        ctx.arc(panelX-12, panelY-12, buttonSize, 0, 2 * Math.PI);
        ctx.fill();
        
        ctx.fillStyle = '#ff3b30';
        ctx.beginPath();
        ctx.arc(panelX+12, panelY-12, buttonSize, 0, 2 * Math.PI);
        ctx.fill();
        
        ctx.fillStyle = '#007aff';
        ctx.beginPath();
        ctx.arc(panelX-12, panelY+12, buttonSize, 0, 2 * Math.PI);
        ctx.fill();
        
        ctx.fillStyle = '#ff9500';
        ctx.beginPath();
        ctx.arc(panelX+12, panelY+12, buttonSize, 0, 2 * Math.PI);
        ctx.fill();
        
        // 装饰光线
        ctx.strokeStyle = '#ffd700';
        ctx.lineWidth = 4;
        ctx.lineCap = 'round';
        ctx.globalAlpha = 0.6;
        
        // 左侧光线
        ctx.beginPath();
        ctx.moveTo(centerX-120, centerY-60);
        ctx.lineTo(centerX-100, centerY-80);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(centerX-110, centerY-100);
        ctx.lineTo(centerX-95, centerY-120);
        ctx.stroke();
        
        // 右侧光线
        ctx.beginPath();
        ctx.moveTo(centerX+120, centerY-60);
        ctx.lineTo(centerX+100, centerY-80);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.moveTo(centerX+110, centerY-100);
        ctx.lineTo(centerX+95, centerY-120);
        ctx.stroke();
        
        // 顶部光线
        ctx.beginPath();
        ctx.moveTo(centerX, centerY-140);
        ctx.lineTo(centerX, centerY-160);
        ctx.stroke();
        
        ctx.globalAlpha = 1;
        
        // 底部文字
        ctx.fillStyle = '#ffffff';
        ctx.font = 'bold 32px Arial, sans-serif';
        ctx.textAlign = 'center';
        ctx.globalAlpha = 0.9;
        ctx.fillText('灯控', centerX, 450);
        
        // 转换为PNG并下载
        setTimeout(() => {
            const link = document.createElement('a');
            link.download = 'light-control-icon.png';
            link.href = canvas.toDataURL();
            link.click();
        }, 1000);
    </script>
</body>
</html>